<template>
	<div class="article">
		<van-nav-bar
		  title="文章详情"
		  left-arrow
			@click-left="$router.back()"
		/>
		<div class="article-wrap">
			<div class="title">{{ article.title }}</div>
			
			<van-cell center class="user-info">
				<div slot="title" class="name">{{ article.aut_name }}</div>
				<van-image slot="icon" class="avatar" round fit="cover" :src="article.aut_photo" />
				<span slot="label" class="pubdate">{{ article.pubdate | relativeTime }}</span>
				<van-button round size="small" :type="article.is_followed ? '' : 'info'"
				 :icon="article.is_followed ? '' : 'plus'" class="follow-btn" @click="onFollow"
				 :loading="isFollowLoading">{{ article.is_followed ? '已关注' : '关注' }}</van-button>
			</van-cell>
			
			<div class="markdown-body" v-html="article.content" ref="article-content" ></div>
				
			
			
			<!-- 评论列表 -->
			<comment-list :source="articleId" :list="commentList"
			 @update-total-count="totalCommentCount = $event"
				@reply-click="onReplyClick"
				/>
			<!-- 评论列表 -->
		</div>
		
		
		<!-- 底部评论栏 -->
		<div class="article-bottom">
			<van-button class="comment-btn" type="default" round size="small" @click="isPostShow = true">写评论</van-button>
			<van-icon class="left" :badge="totalCommentCount" name="comment-o" color="#777"  />
			<van-icon :name="article.is_collected ? 'star' : 'star-o'"  :color="article.is_collected ? 'orange' : '#777'"
			 @click="onCollect" />
			<van-icon :name="article.attitude === 1 ? 'good-job' : 'good-job-o'" 
			:color="article.attitude === 1 ? 'hotpink' : '#777'" @click="onLike" />
			<van-icon name="share" color="#777" />
		</div>
		<!-- 底部评论栏 -->
		
		<!-- 发布评论 -->
		<van-popup v-model="isPostShow" position="bottom">
			<post-comment :target="articleId" @post-success="onPostSuccess" />
		</van-popup>
		<!-- 发布评论 -->
		
		<!-- 评论回复 -->
		<van-popup v-model="isReplyShow" position="bottom">
			<comment-reply :comment="replyComment" @close="isReplyShow = false" v-if="isReplyShow" :article-id="articleId" />
		</van-popup>
		<!-- 评论回复 -->
		
		
	</div>
</template>


<script>
	import { getArticleById } from '../../utils/article.js'
	import { ImagePreview } from 'vant'
	import { addFollow,deleteFollow } from '../../utils/user.js'
	import { addCollect,deleteCollect,addLike,deleteLike } from '../../utils/article.js'
	import CommentList from './components/comment-list.vue'
	import PostComment from './components/post_comment.vue'
	import CommentReply from './components/comment-reply.vue'

	export default {
		name:'Article',
		components: {
			CommentList,
			PostComment,
			CommentReply
		},
		props: {
			articleId: {
				type:[Number,Object,Array,String],
				required:true
			}
		},
		data() {
			return {
				article: {},
				isFollowLoading:false,
				isPostShow:false,
				commentList:[],
				totalCommentCount:0,
				isReplyShow:false,
				replyComment:{}
			}
		},
		created() {
			this.loadArticle()
		},
		methods: {
			async loadArticle() {
				const { data } = await getArticleById(this.articleId)
				console.log(data)
				this.article = data.data
				
				
				const articleContent = this.$refs['article-content']
				this.$nextTick(() => {
						const image = articleContent.querySelectorAll('img')
						
						const imgPaths = []
						image.forEach((img,index) => {
							imgPaths.push(img.src)
							img.onclick = function () {
								ImagePreview({
									images: imgPaths,
									startPosition:index
								})
							}
						})
				})
				
			},
			async onFollow() {
				this.isFollowLoading = true
				if(this.article.is_followed) {
					//已关注
					await deleteFollow(this.article.aut_id)
				}else {
					//未关注
					await addFollow(this.article.aut_id)
				}
				this.article.is_followed = !this.article.is_followed
				this.isFollowLoading = false
			},
			async onCollect() {
				this.$toast.loading({
					message:'操作中...',
					forbidClick:true
				})
				if(this.article.is_collected) {
					//已收藏
					await deleteCollect(this.articleId)
				}else {
					//未收藏
					await addCollect(this.articleId)
				}
				this.article.is_collected = !this.article.is_collected
				this.$toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`)
			},
			async onLike() {
				this.$toast.loading({
					message:'操作中...',
					forbidClick:true
				})
				if(this.article.attitude === 1) {
					//已点赞
					await deleteLike(this.articleId)
					this.article.attitude = -1
				}else {
					//未点赞
					await addLike(this.articleId)
					this.article.attitude = 1
				}
				
				this.$toast.success(`${this.article.attitude === 1 ? '' : '取消'}点赞成功`)
			},
			onPostSuccess(comment) {
				this.commentList.unshift(comment)
				
				this.totalCommentCount++
				
				this.isPostShow = false
				
			},
			onReplyClick(comment) {
				this.replyComment = comment
				
				this.isReplyShow = true
			}
		},
		
	}
</script>

<style scoped="scoped">
	@import url("./github-markdown.css");
	.title {
		font-size: 20px;
		color: #3a3a3a;
		font-weight: 700;
		padding: 14px;
	}
	.name {
		font-size: 12px;
		color: #333;
	}
	.pubdate {
		font-size: 12px;
		color: #b4b4b4;
	}
	.avatar {
		width: 35px;
		height: 35px;
		margin-right: 9px ;
	}
	.follow-btn {
		width: 85px;
		height: 29px;
		border: none;
	}
	.markdown-body {
		padding: 14px;
		background-color: #fff;
		
	}
	ul {
		list-style: unset;
	}
	/* 底部 */
	.article-bottom {
		height: 44px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 14px;
		border-top: 1px solid #f6f6f6;
		background-color: #fff;
	}
	.comment-btn {
		position: absolute;
		left: 14px;
		top:25%;
		width: 150px;
		height: 23px;
	}
	.article-bottom .van-icon {
		line-height: 44px;
		padding: 0 12px;
	}
	.left {
		margin-left: 150px;
	}
	.van-info {
		position: absolute;
		    top: 10px;
		    right: 11px;
	}
	.article-wrap {
		position: fixed;
		left: 0;
		right: 0;
		top: 46px;
		bottom: 44px;
		overflow-y: auto;
	}
</style>
